<template>
  <div class="activeBox">
    <div class="activeBox-text">
      <div v-if="$route.query.type == 1">

        <p>嘀嘀--欢迎来到第一站【新年许愿签】。祝你新的一年，万事大吉吖（快递爱意）</p>
        <p>本站规则：</p>
        <p>STEP 1: 请前往你所在地许愿点获取一张许愿签或自制一张许愿签</p>
        <p>STEP 2: 在许愿签上留下你的新年心愿</p>
        <p>STEP 3: 拍摄许愿签或合影打卡</p>
        <p>STEP 4:
          扫描许愿签上二维码或线上二维码进入到线上活动平台，并上传照片，你可以多次上传，上传成功后，可获得最高10电力值的奖励，即刻参与抽奖！</p>
        <p style="margin-top: 0.5rem">Beep--Welcome to the first stop of “New Year Wishlist” . Happy New Year！
          (Expressing love)</p>
        <p>Rules of this stop:</p>
        <p>Step1: Go to your location and get a wish tag or make your own tag.</p>
        <p>Step2: Write your New Year’s wishes on the wishlist.</p>
        <p>Step3: Take a photo of your wish sign or group.</p>
        <p>Step4: Scan the QR code on the wishing stick or online to enter the online activity platform and upload the
          photo (you can upload many times). After uploading successfully, you can get the maximum 10 power value reward
          and participate in the lucky draw immediately!</p>
      </div>

      <div v-if="$route.query.type == 2">
        <p>Hello欢迎来到第三站【晒晒我的宝藏工位】。希望新vibe能给你带来持续好运哦~</p>
        <p>本站规则：</p>
        <p>STEP 1: 请拍摄几张你的宝藏工位或办公宝物，不限角度。</p>
        <p>STEP 2: 请上传照片，并附上一段简介；你可以多次上传，上传成功后，可获得最高10电力值的奖励，即刻参与抽奖！</p>
        <p>STEP 3: 你也可以选择给其他塔迷点赞，活动期间高赞前50还能领取兔年摇摇杯哦！（每人每天仅限5赞）</p>
        <p style="margin-top: 0.5rem">Hello, welcome to the third stop【Show off my treasurable office furnishings】.
          Hope the new vibe can continue
          to bring you good luck~</p>
        <p>Rules of this stop:</p>
        <p>Step1: Take pictures of your treasurable office furnishings or office supplies with unlimited angle.</p>
        <p>Step2: Please upload a photo with an interesting introduction; You can upload many times, after uploading
          successfully, you can get the maximum 10 power value reward and participate in the lucky draw immediately!</p>
        <p>Step3: You can also choose to “liked” other colleagues and people with the top 50 likeds during the activity
          will receive a shake cup of the Year of the Rabbit! (Only five votes per person per day).</p>
      </div>
      <!--      新伙伴-->
      <div v-if="$route.query.type == 3">
        <p>
          终于来到第二站【共绘塔塔】—内部IP灵感征集（比个椰）。“塔塔”作为塔迷的小伙伴，是能量满满，温暖真诚？还是古灵精怪？搞笑呆萌？你心中的“塔塔”是什么样子？快来拿起画笔，画出你心中的小塔模样！</p>
        <p>本站规则：</p>
        <p>STEP 1: 请拍摄几张你或家中孩子绘制好的作品，不限角度</p>
        <p>STEP 2: 请上传作品，并附上简介</p>
        <p>STEP 3:
          本轮活动分成人组和儿童组，请选择其中一组进行上传；你可以多次上传，上传成功后，可获得最高10电力值的奖励，即刻参与抽奖！</p>
        <p>STEP 4:
          待投票开启后，你可以给他人作品进行投票，成人和儿童作品的前88名，分别可以获得“塔兔红包”和“塔兔毛绒玩具”的奖品！（每人每天仅限5票）</p>
        <p style="margin-top: 0.5rem">Finally come to the second stop【Drawing Tata together】-internal IP inspiration
          collection (Bigeye). “Tata” as
          a friend of tower fans is either full of energy, warm and sincere? Or is it quaint? Funny and cute? What is
          your “Tata” like in your heart? Come and pick up you brush and paint the shape of the little tower in your
          heart!</p>
        <p>Rules of this stop:</p>
        <p>Step1: Please take photos that you or your children have drawn with unlimited creativity.</p>
        <p>Step2: Please upload your work and attach a brief introduction.</p>
        <p>Step3: This round of activity is divided into adult group and children group, please choose one group to
          upload; You can upload many times, after uploading successfully, you can get the maximum 10 power value reward
          and participate in the lucky draw immediately!</p>
        <p>Step4: After the voting is opened, you can vote for other people’s works. The top 88 works from adults and
          children will achieve prizes of “Red envelop of Ta Rabbit” and “Plush toy of Ta Rabbit”! (Only five votes per
          person per day).</p>
      </div>
      <div v-if="$route.query.type == 4">
        <p>第四站【年会】来喽~~打卡签到，才能获得抽大奖的机会哦，Good luck~</p>
        <p>本站规则：</p>
        <p>STEP 1: 请点击活动页面上的“新目标”按钮，自动跳转到宣传片页面。</p>
        <p>STEP 2: 请根据提示等待播放宣传片并进行观看。</p>
        <p>STEP 3: 请观看完整的宣传片，获得10电力值的奖励。</p>
        <p style="margin-top: 0.5rem">The fourth stop 【Annual meeting】is coming~~ Punch the card to get the chances to
          draw the big prizes, good luck~</p>
        <p>Rules of this stop:</p>
        <p>Step1: Please click the “New Target” button on the activity page to automatically pop by the promotional
          video page.</p>
        <p>Step2: Please wait for the video and watch it according to the prompt.</p>
        <p>Step3: Please watch the full promo video and get a reward of 10 power values.</p>
      </div>
      <!--   抽奖   -->
      <div v-if="$route.query.type == 5">
        <p> 哇！终于等到你，祝你运气爆棚，锦鲤本鲤中大奖！（德国同事抽中e值可兑换成相应的奖品）</p>
        <p>STEP 1: 本次活动共分为5轮抽奖，前4轮瓜分E值奖，最后一轮锦鲤奖</p>
        <p>STEP 2: “E值奖”即完成一站打卡，获取10电力值，参与抽奖</p>
        <p>STEP 3: 完成所有四站打卡，即40电力值，方能参与第五轮“锦鲤奖”抽奖，抽取你的兔年大礼包！</p>
        <p style="margin-top: 0.5rem">Wow! We finally got u！ I wish you good luck and win the biggest prize! (
          colleagues in Germany can convert
          corresponding prizes if they draw the e value)</p>
        <p>Rules for this stop:</p>
        <p>Colleagues in Germany can convert corresponding prizes if you draw the E-point on AVATR APP : The special
          prize can get the shake cup of the Year of the Rabbit.The first and the second prize can get the plush toys of
          tower rabbit.Third, fourth and fifth prizes can get red envelop of TA rabbit.</p>
        <p>Step1: This activity is divided into 5 rounds of drawing, the four rounds of carving up the e value prize,
          the last round for the koi prize.</p>
        <p>Step2: “E-point prize” means to complete a station punch in, then get 10 power value and participate in the
          lucky draw.</p>
        <p>Step 3: After completing all four stations punch in, which is 40 power value, you can participate in the
          fifth round of “Koi prize” lucky draw, and draw your Year of the Rabbit gift package!</p>

      </div>
    </div>
    <img class="action" @click="goList" src="../../assets/image/go.png" alt="">
    <!--    <div class="activeBox-go">{{ $route.query.type == 4 ? "前往观看" : "GO" }}</div>-->
  </div>
</template>

<script>
import {myConstants} from "@/utils/activitytime";

export default {
  name: "index",
  methods: {
    goList() {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        let type = _this.$route.query.type;
        // _this.$store.commit("changeaudioUrl", type);
        if (type == 1) {
          //新年祝福
          _this.$router.replace({path: "/list", query: {type: "1"}});
        } else if (type == 2) {
          //活动二：新氛围
          _this.$router.replace({path: "/listTwo", query: {type: "2"}});
        } else if (type == 3) {
          //活动三：共绘小塔-点赞有限制
          _this.$router.replace({path: "/list", query: {type: "3"}});
        } else if (type == 4) {
          //活动四：观看宣传片
          _this.$router.replace({path: "/videoList", query: {type: "4"}});
        } else if (type == 5) {
          _this.$router.replace({path: "/luckyDrawSelect", query: {type: "5"}});
        }
      }, myConstants.delay)
    }, mounted() {
      // let type = this.$route.query.type;
      // console.log("type=" + type)
      // this.$store.commit("changeaudioUrl", type);
    }
  }
};
</script>

<style scoped lang="scss">
.activeBox {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/image/start.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //justify-content: center;

  &-text {
    //width: 80%;
    height: 152.4vw;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBA9BC 100%);
    border-radius: 29px 29px 29px 29px;
    opacity: 1;
    margin: 0.46875rem 1rem 0;
    box-sizing: border-box;
    overflow-y: scroll;
    padding: 20px;

    p {
      margin-bottom: 5px;
      font-size: 15px;
      font-family: DIN Pro-Regular;
      font-weight: 400;
      color: #181818;
    }
  }

  &-go {
    margin-top: 24px;
    min-width: 117px;
    height: 54px;
    padding: 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
    border-radius: 34px 34px 34px 34px;
    opacity: 1;
    text-align: center;
    line-height: 54px;
    font-size: 30px;
    font-family: DIN Pro-Regular, DIN Pro;
    font-weight: 400;
    color: #181818;
  }
}

.action {
  height: 1.875rem;
  margin-top: 0.46875rem;
}
</style>
